博客

针对 bs 的 collapse 写了个添加项的 func

最近在做个项目，用到了 bs 的 collapse，模拟了 select 的操作。但是其中选择的项不是很方便更改，于是写了个 function 来更改其中的 li。在这做个笔记，避免日后忘记，大神见笑。

1
2
3
4
var createPanel=function(to,id,title,lis) {
    var collapseIn=typeof arguments[4]!=="undefined"?arguments[4]:$("#"+to+" .panel").length?1:0;
    $("#"+to).append($('<div class="panel panel-default" id="panel_'+to+'_'+id+'"><div class="panel-heading" role="tab" id="heading_'+to+'_'+id+'"><h4 class="panel-title"><a'+(collapseIn?'':' class="collapsed"')+' role="button" data-toggle="collapse" data-parent="#'+to+'" href="#collapse_'+to+'_'+id+'" aria-expanded="'+(collapseIn?'false':'true')+'" aria-controls="collapse_'+to+'_'+id+'">'+title+'</a></h4></div><div id="collapse_'+to+'_'+id+'" class="panel-collapse collapse'+(collapseIn?'':' in')+'" role="tabpanel" aria-labelledby="heading_'+to+'_'+id+'"><ul class="list-group">'+((function() { var op=""; for (var i in lis) { op+='<li class="list-group-item" data-menuid="'+i+'">'+lis[i]+'</li>'; } return op; })())+'</ul></div></div>'));
};

用法：

1
mixed createPanel ( string appendToDomId, mixed panelId, mixed title, object liData, [ bool collapseIn ] )

1
<div class="panel-group" id="subject" role="tablist" aria-multiselectable="true"></div>
1
2
createPanel("subject",0,"学科1",{1:"Chinese",2:"English",3:"German"},true);
createPanel("subject","1","学科2",{1:"Physics",2:"Economics"});

我不忍吐槽 bs 的文档，汉化根本不完全。。。这是原文档链接 http://v3.bootcss.com/javascript/#collapse。嗯，就这样吧。。。

Web 开发